<template>
	<el-dialog
		:title="dialogTitle"
		:rules="rules"
		:visible.sync="centerDialogVisible"
		width="30%"
		center
		:close-on-click-modal="showclosemodalpress"
		:close-on-press-escape="showclosemodalpress"
	>
		<span>
			<el-form ref="dataForm" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="工号" prop="workno"><el-input v-model="form.workno"></el-input></el-form-item>
				<el-form-item label="姓名" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
				<el-form-item v-if="loginstate == 1" label="部门单位" prop="distinction"><el-input v-model="form.distinction"></el-input></el-form-item>
			</el-form>
		</span>
		<span slot="footer" class="dialog-footer">
			<el-button v-if="loginstate == 0" @click="dologin(0)" type="warning">登陆</el-button>
			<!-- <el-button v-if="loginstate == 0" type="primary" @click="dologin(1)">注册</el-button> -->
			<el-button v-if="loginstate == 1" type="success" @click="dologin(2)">确定</el-button>
			<el-button v-if="loginstate == 1" type="info" @click="dologin(3)">返回</el-button>
		</span>
	</el-dialog>
</template>

<script>
import { getToken, setToken } from '@/utils/auth';
import { DoLogin,RegiSter } from '@/api/login';
const validatePass = (rule, value, callback) => {
	var isIDCard1 = /^[1-9]\d*$/;

	if (isIDCard1.test(value)) {
		callback();
	} else {
		callback(new Error('请输入正确的工号'));
	}
};
const validateName = (rule, value, callback) => {
	if (value) {
		callback();
	} else {
		callback(new Error('不可为空'));
	}
};
export default {
	name: 'LoginRegister',
	data() {
		return {
			dialogTitle: '登陆',
			showclosemodalpress: false,
			centerDialogVisible: this.dialogVisible,
			form: {
				name: '',
				distinction: '',
				workno: ''
			},
			reform: {
				name: '',
				distinction: '',
				workno: ''
			},
			loginstate: 0,
			rules: {
				name: [
					{
						required: true,
						validator: validateName,
						trigger: 'blur'
					}
				],
				workno: [
					{
						required: true,
						validator: validateName,
						trigger: 'blur'
					}
				],
				distinction: [
					{
						required: true,
						validator: validateName,
						trigger: 'blur'
					}
				]
			}
		};
	},
	props: {
		dialogVisible: Boolean,
		state: Number
	},
	watch: {
		dialogVisible(val) {
			this.centerDialogVisible = val;
		},
		state(val) {
			this.loginstate = val;
		},
		centerDialogVisible(val) {
			this.$emit('onVisible', val); 
		},
		loginstate(val) {
			this.$emit('onVisibleState', val);
		}
	},
	computed: {},
	methods: {
		dologin(code) {
			if (code == 1) {
				this.loginstate = code;
				this.dialogTitle = '注册';
			} else if (code == 2) {
				//注册确认
					this.$refs['dataForm'].validate(valid => {
						if (valid) {
							var _this = this;
							//登陆
							RegiSter(this.form).then(data => {
								if (!data.result) {
									_this.$message({
										showClose: true,
										message: data.error,
										type: 'error'
									});
								} else {
									_this.$message({
										type: 'info',
										message: '注册成功！'
									});
									_this.form = _this.reform;
									_this.centerDialogVisible = false;
								}
							});
						}
					});
			} else if (code == 3) {
				this.loginstate = 0;
				this.dialogTitle = '登陆';
			} else if (code == 0) {
					//登陆确认
						this.$refs['dataForm'].validate(valid => {
							if (valid) {
								var _this = this;
								//登陆
								DoLogin(this.form).then(data => {
									if (!data.result) {
										_this.$message({
											showClose: true,
											message: data.error,
											type: 'error'
										});
									} else {
										_this.$message({
											type: 'info',
											message: '登陆成功！'
										});
										_this.form = _this.reform;
										_this.centerDialogVisible = false;
										setToken(data.data);
										 _this.$bus.emit('OnLoginState');
									}
								});
							}
						});
				
			}
		}
	}
};
</script>

<style></style>
